<template>
  <view class="mian">
    <!-- 专辑背景开始 -->
    <view class="album_bg">
      <image mode="widthFix" :src="album.cover"></image>
      <view class="album_info">
        <view class="album_name">
          {{ album.name }}
        </view>
        <view class="album_btn" @click="attent"
          >{{ album.attented ? "取消关注" : "关注专辑" }}
        </view>
      </view>
    </view>
    <!-- 专辑背景结束 -->

    <!-- 专辑作者开始 -->
    <view class="album_author">
      <view class="author_info">
        <image mode="widthFix" :src="album.user.avatar"></image>
        <view class="author_name">
          {{ album.user.name }}
        </view>
      </view>
      <view class="album_desc">
        <text>{{ album.desc }}</text>
      </view>
    </view>
    <!-- 专辑作者结束 -->

    <!-- 专辑列表开始 -->
    <view class="album_list">
      <view class="album_content">
        <view
          class="album_items"
          v-for="(item, index) in wallpaper"
          :key="item.id"
        >
          <view
            class="priview"
            @click="previewImage($event)"
            :data-url="item.thumb"
          >
            <image
              mode="widthFix"
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
            ></image>
          </view>
          <go-detail :list="wallpaper" :index="index">
            <view class="iconfont icon-yanjing"> 详情</view>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 专辑列表结束 -->
  </view>
</template>

<script>
import goDetail from "@/components/goDetail";
export default {
  components: {
    goDetail,
  },
  data() {
    return {
      //专辑id
      id: "",
      //请求的参数
      params: {
        limit: 30,
        order: "new",
        skip: 0,
        // 1 返回值中 有 album对象 表示第一次请求数据
        // 0 返回值中 只有 wallpaper 数组  不是第一次请求数据
        first: 1,
      },
      //专辑分类数据
      album: {},
      //列表数据
      wallpaper: [],
      //判断是否有更多数据
      hasMore: true,
    };
  },
  onLoad(options) {
    this.id = options.id;
    // this.id = "5d5f8e45e7bce75ae7fb8278";
    // this.id = "5177907348d5b96b2eacbae0";
    this.getList();
  },

  methods: {
    getList() {
      this.request({
        url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
        data: this.params,
      }).then((res) => {
        console.log(res);
        if (Object.keys(this.album).length === 0) {
          //第一次发送请求
          this.album = res.res.album;
        }
        //判断是否有更多数据
        console.log(res.res.wallpaper);
        if (res.res.wallpaper.length === 0) {
          //没有更多数据
          this.hasMore = false;
          wx.showToast({
            title: "(ಥ﹏ಥ)没有更多数据了",
            icon: "none",
          });
          return;
        }
        //拼接列表数据
        this.wallpaper = [...this.wallpaper, ...res.res.wallpaper];
        //获取缓存中的数据
        const attents = wx.getStorageSync("attents") || [];
        //判断缓存中的数据是否有该条数据
        const index = attents.findIndex((v) => v.id === this.album.id);
        if (index != -1) {
          this.album.attented = true;
        } else {
          this.album.attented = false;
        }
        console.log(this.album);
      });
    },

    //关注
    attent() {
      //深拷贝数组
      let newAlbum = JSON.parse(JSON.stringify(this.album));
      //获取缓存中的关注数据
      const attents = wx.getStorageSync("attents") || [];
      //判断这个专辑的attented
      if (newAlbum.attented) {
        //如果attented是true，点击之后是取关操作，
        //把attented改为false
        newAlbum.attented = false;
        //并把缓存中该条数据删除
        const index = attents.findIndex((v) => v.id === newAlbum.id);
        if (index != -1) {
          wx.showToast({
            title: "取消关注",
            icon: "success",
            duration: 1000,
            mask: true,
          });
          attents.splice(index, 1);
        }
      } else {
        //attented为false，点击之后是关注操作
        //把attented改为true
        newAlbum.attented = true;
        wx.showToast({
          title: "关注成功",
          icon: "success",
          duration: 1000,
          mask: true,
        });
        //把该条数据存储到缓存中的attents中
        attents.push(newAlbum);
      }
      this.album = newAlbum;
      //把数据存回缓存
      wx.setStorageSync("attents", attents);
    },
    //预览图片
    previewImage(e) {
      // console.log('预览')
      //接收点击的的图片路径
      const current = e.currentTarget.dataset.url;
      //先构造要预览的图片数组
      const urls = this.wallpaper.map((v) => v.thumb);
      wx.previewImage({
        current,
        urls,
      });
    },
  },
  //列表滚动触底事件
  onReachBottom() {
    console.log("触底了");
    if (this.hasMore) {
      this.params.first = 0;
      //有更多数据
      this.params.skip += this.params.limit;
      //重新发送请求
      this.getList();
    } else {
      wx.showToast({
        title: "(ಥ﹏ಥ)没有更多数据了",
        icon: "none",
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.mian {
  .album_bg {
    position: relative;
    // 高斯模糊
    image {
      filter: blur(5rpx);
    }

    .album_info {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      color: #fff;
      padding: 20rpx;
      .album_name {
        font-size: 36rpx;
        font-weight: 600;
      }

      .album_btn {
        background-color: #d4237a;
        border-radius: 16rpx;
        padding: 10rpx 20rpx;
      }
    }
  }
  .album_author {
    padding: 20rpx;
    margin-bottom: 30rpx;
    .author_info {
      display: flex;
      align-items: center;
      image {
        width: 8%;
      }

      .author_name {
        color: #000;
        font-weight: 600;
        margin-left: 20rpx;
      }
    }

    .album_desc {
      color: #727272;
      margin-top: 20rpx;
    }
  }
  .album_list {
    .album_content {
      display: flex;
      flex-wrap: wrap;
      .album_items {
        border: 1px solid #fff;
        width: 33.33%;
        image {
          height: 160rpx !important;
        }
        .icon-yanjing {
          text-align: center;
          font-size: 28rpx;
        }
        .icon-yanjing:hover {
          background-color: #eee;
        }
      }
    }
  }
}
</style>
